<!-- index.hetml -->
<!DOCTYPE html>
<html>
	<head>
		<!-- meta标签：<meta> 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。 -->
		<!-- META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据 -->
		<meta charset="utf-8" />
		<!-- 网页的描述 -->
		<meta name="description" content="欢迎来到whkgogo的个人网空间" />
		<!-- 网页的关键词 -->
		<meta name="keywords" content="whkgogo的个人博客" />
		<!-- 网页的作者 -->
		<meta name="author" content="whk" />
		<!-- 引入自己编写的CSS文件 -->
		<link rel="stylesheet" type="text/css" href="./css/style.css" />
		<!-- 引入图标CSS文件 -->
		<!-- 网址：http://www.fontawesome.com.cn -->
		<link rel="stylesheet" type="text/css" href="./css/font-awesome.min.css"/>
		<title>whkgogo的主页</title>
	</head>
	<body>
		<!-- 顶部导航栏 + 主页大图 -->
		<header class="index_header">
			<nav id="navBar">
				<div class="container">
					<h1>
						<a href="index.html">whkgogo</a>
					</h1>
					<ul>
						<li>
							<a class="current" href="index.html">首页</a>
						</li>
						<li>
							<a href="about.html">关于我</a>
						</li>
						<li>
							<a href="contact.html">与我联系</a>
						</li>
					</ul>
				</div>
				<div id="showcase">
					<div class="container">
						<div class="showcase_content">
							<h1><span class="text_primary">欢迎来到</span>whkgogo的空间</h1>
							<p>做好每一件与我相关的事情，不负青春，不负信任，不忘初心，牢记使命！</p>
							<a href="about.html" class="btn_about">关于我 ></a>
						</div>
					</div>
				</div>
			</nav>
		</header>
		
		
		<!-- info部分内容 -->
		<div id="home_info">
			<!-- 介绍中的图片位置 -->
			<div class="home_info_image">

			</div>
			<!-- 介绍中的文字信息 -->
			<div class="home_info_content">
				<h1><span class="text_primary">whkgogo</span>不甘平凡</h1>
				<p>做好每一件与我相关的事情，不负青春，不负信任，不忘初心，牢记使命！做好每一件与我相关的事情，不负青春，不负信任，不忘初心，牢记使命！
					做好每一件与我相关的事情，不负青春，不负信任，不忘初心，牢记使命！做好每一件与我相关的事情，不负青春，不负信任，不忘初心，牢记使命！</p>
				<a href="about.html" class="btn_about_dark">关于我 ></a>
			</div>
		</div>
		
		<!-- 更多内容部分 -->
		<div id="more_content">
			<div class="more_item_dark">
				<div class="more_icon ">
					<i  class="fa fa-eye fa-3x" class="icon-cangchucangku"></i>
					<h1>专注</h1>
				</div>
				<div id="more_text">
					<p>做好每一件与我相关的事情，不负青春，不负信任，不忘初心，牢记使命！做好每一件与我相关的事情，不负青春，不负信任，不忘初心，牢记使命！
						做好每一件与我相关的事情，不负青春，不负信任，不忘初心，牢记使命！做好每一件与我相关的事情，不负青春，不负信任，不忘初心，牢记使命！</p>
				</div>
			</div>
			<div class="more_item_light">
				<div class="more_icon">
					<i  class="fa fa-cogs fa-3x" class="icon-cangchucangku"></i>
					<h1>创新</h1>
				</div>
				<div id="more_text">
					<p>做好每一件与我相关的事情，不负青春，不负信任，不忘初心，牢记使命！做好每一件与我相关的事情，不负青春，不负信任，不忘初心，牢记使命！
						做好每一件与我相关的事情，不负青春，不负信任，不忘初心，牢记使命！做好每一件与我相关的事情，不负青春，不负信任，不忘初心，牢记使命！</p>
				</div>
			</div>
			<div class="more_item_dark">
				<div class="more_icon">
					<i  class="fa fa-users fa-3x" class="icon-cangchucangku"></i>
					<h1>协作</h1>
				</div>
				<div id="more_text">
					<p>做好每一件与我相关的事情，不负青春，不负信任，不忘初心，牢记使命！做好每一件与我相关的事情，不负青春，不负信任，不忘初心，牢记使命！
						做好每一件与我相关的事情，不负青春，不负信任，不忘初心，牢记使命！做好每一件与我相关的事情，不负青春，不负信任，不忘初心，牢记使命！</p>
				</div>
			</div>
		</div>
		<!-- 上一个div里面设置了float浮动样式，因为没有清除浮动，所以会影响之后的元素
		 为了解决这个问题，所以要在这个元素后面添加一个div标签用来清除元素，起到隔断浮动的作用-->
		<div class="clr"></div>
		
		
		<footer id="main_footer">
			<p class="footer_p">whkgogo &copy; 2021 All Rights Reserved</p>
		</footer>

	</body>
</html>
